<template>
    <div class="canvas">
        <!-- <canvas id="canvas" width="600" height="400"></canvas> -->
        <canvas id="progress" width="600" height="600"></canvas>
    </div>
</template>
<script>
export default {
    name: 'canvas',
    methods: {
        // canvas填充与路径绘制
        canvasFun() { 
            let c1 = document.getElementById('canvas')
            if (!c1.getContext) { 
              console.log('不支持该浏览器')
            }
            let context = c1.getContext("2d")
            context.beginPath()
            context.rect(10, 10, 100, 50)
            context.stroke()
            context.closePath()

            context.beginPath()
            context.rect(120, 20, 100, 50)
            context.fill()
            context.closePath()

            let height = 0 
            let t1 = setInterval(() => { 
                height++
                context.clearRect(0, 0, c1.clientWidth, height)
                if (height > c1.clientHeight) { 
                    clearInterval(t1)
                }
            },10)
        },
        // canvas绘制圆弧与笑脸
        canvasFun1() { 
            let c1 = document.getElementById('canvas')
            if (!c1.getContext) { 
              console.log('不支持该浏览器')
            }
            let context = c1.getContext("2d")
            context.beginPath()
            context.arc(75, 75, 50, 0, Math.PI * 2)
            context.moveTo(110,75)
            context.arc(75, 75, 35, 0, Math.PI)
            context.moveTo(65,65)
            context.arc(60, 65, 5, 0, Math.PI * 2)
            context.moveTo(95,65)
            context.arc(90,65,5,0,Math.PI * 2)
            context.stroke()
            
            context.closePath()
        },
        //绘制折线线段
        canvasFun2() { 
            let c1 = document.getElementById('canvas')
            if (!c1.getContext) { 
              console.log('不支持该浏览器')
            }
            let context = c1.getContext("2d")
            context.beginPath()
            context.lineTo(350, 250)
            context.lineTo(350, 200)
            context.lineTo(300,200)
            context.stroke()
            context.closePath()

            context.beginPath()
            context.lineTo(200, 100)
            context.lineTo(250, 150)
            context.lineTo(250, 100)
            context.lineTo(200, 100)
            context.fill()
            context.closePath()
        },
        //arcTo绘制圆弧方式
        canvasFun3() { 
            let c1 = document.getElementById('canvas')
            if (!c1.getContext) { 
              console.log('不支持该浏览器')
            }
            let context = c1.getContext("2d")
            context.beginPath()
            context.moveTo(300,200)
            context.arcTo(300, 250, 250, 250, 50)
            context.stroke()
            context.closePath()
        },
        // 线段和虚线样式设置
        canvasFun4() { 
            let c1 = document.getElementById('canvas')
            if (!c1.getContext) { 
              console.log('不支持该浏览器')
            }
            let context = c1.getContext("2d")
            context.beginPath()
            context.moveTo(290, 150)
            context.lineTo(300, 200)
            context.lineTo(310, 150)
            context.lineWidth = 2
            context.lineCap = 'square'
            context.lineJoin='mitter'
            context.miterLimit = 5

            // 设置虚线
            context.setLineDash([1, 5])
            // context.lineDashoffset()
            context.stroke()
        },
        // 绘制圆环进度条函数
        drawProgress(progress) {
            // 清除画布
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

            // 绘制背景圆环
            this.ctx.beginPath();
            this.ctx.arc(this.x, this.y, this.radius, this.startAngle, Math.PI / 4);
            this.ctx.lineWidth = this.lineWidth;
            this. ctx.strokeStyle = "#008000";
            this.ctx.stroke();

            // 绘制进度圆环
            this.endAngle = this.startAngle + ((3 * Math.PI / 2) * progress);
            this. ctx.beginPath();
            this.ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
            this.ctx.lineWidth = this.lineWidth;
            this.ctx.strokeStyle = "#ff0000";
            this.ctx.stroke();
        },
        // 绘制里面的刻度条
         drawTicks() {
            var numTicks = 50; // 刻度数量
            var tickLength = 8; // 刻度长度
            var tickColor = "#000000"; // 刻度颜色
            var tickWidth = 2; // 刻度宽度

            let startAngle = (3 * Math.PI) / 4;
            let endAngle = (1.48 * Math.PI) / 2;

            var angleStep = ((endAngle + startAngle) / numTicks); // 每个刻度之间的角度差

            this.ctx.save(); 

            // 将原点移到圆心处
            this.ctx.translate(this.x, this.y);


            // 绘制刻度
            for (var i = 0; i <= numTicks; i++) {
                var angle = startAngle + (i * angleStep) + 0.01;
                
                if (i % 5 == 0) {
                    tickWidth = 5;
                } else {
                    tickWidth = 2;
                }
                
                this.ctx.beginPath();
                this.ctx.lineWidth = tickWidth;
                this.ctx.strokeStyle = tickColor;

                // 计算刻度起点和终点的坐标
                console.log('angleangle',angle)
                var startX = (this.radius - tickLength - 4) * Math.cos(angle);
                // console.log('startX',startX)
                var startY = (this.radius - tickLength - 4) * Math.sin(angle);
                // console.log('startY',startY)
                var endX = (this.radius - 4) * Math.cos(angle);
                var endY = (this.radius - 4) * Math.sin(angle);
                // 绘制刻度线段
                this.ctx.moveTo(startX, startY);
                this.ctx.lineTo(endX, endY);
                this.ctx.stroke();

                // 绘制时间文本
                var text = i % 5 == 0 ? (i * 2).toString() : '';
                var textX = (this.radius - tickLength - 20) * Math.cos(angle);
                var textY = (this.radius - tickLength - 20) * Math.sin(angle);
                this.ctx.font = "16px Arial";
                this.ctx.fillStyle = "#000000";
                this.ctx.textAlign = "center";
                this.ctx.textBaseline = "middle";
                this.ctx.fillText(text, textX, textY);
            }

            this.ctx.restore(); // 恢复之前的绘图状态
        },
        // 绘制指针
        drawPointer(progress) { 
            let kedu = (((2.4) * 2) / 100);  //我的起始角度0的位置旋转角度是从-2.4到2.4
            let rotate1 = (2.4 - (kedu * progress * 100));
            if (progress < 0.5) {
                rotate1 = -rotate1;
            } else {
                rotate1 = -rotate1;
            }
            this.ctx.save();
            this.ctx.translate(this.x, this.y);
            this.ctx.rotate(rotate1);
            this.ctx.beginPath();
            this.ctx.moveTo(this.x - (2 * this.radius) + 50, this.y - (2 * this.radius) + 60);
            this.ctx.lineTo(this.x - (2 * this.radius) + 40, this.y - (2 * this.radius) + 46);
            this.ctx.lineTo(this.x - (2 * this.radius) + 50, this.y - (2 * this.radius) - 70);
            this.ctx.lineTo(this.x - (2 * this.radius) + 60, this.y - (2 * this.radius) + 46);
            this.ctx.fillStyle = "#ff0000";
            this.ctx.fill();
            this.ctx.restore();

        },
        //绘制文本显示当前的值
         drawText(value){
            this.ctx.font = "40px Arial";
            this.ctx.fillStyle = "#000000";
            this.ctx.fillText((value*100).toFixed(2)+'%', this.x-60, this.y+42);
        }



    },
    created() { 
           
    },
    mounted() {
        //    this.canvasFun4()
         // 获取canvas元素和上下文
         this.canvas = document.getElementById("progress");
            this.ctx = this.canvas.getContext("2d");

            // 圆环参数
            this.x = this.canvas.width / 2;
            this.y = this.canvas.height / 2;
            this.radius = 176;
            this.lineWidth = 10;
        this.startAngle = (3 * Math.PI) / 4;  //相当于从钟表中的差不多7点开始
            // console.log('startAngle',this.startAngle)
            this.endAngle = -Math.PI / 4;         //相当于从钟表中的差不多5点结束
        this.drawProgress(0.2)
        this.drawTicks()
        this.drawPointer(0.2)
        this.drawText(0.2)
    }
}    
</script>